<template>
	<view class="btn" @click="clickHandle">
		<slot></slot>
		<view 
			class="popover-box" 
			:class="{ 
				'top': props.position == 'top',
				'bottom': props.position == 'bottom',
				'left': props.position == 'left',
				'right': props.position == 'right',
			}"
			v-if="show"
		>
		hello world
		</view>
	</view>
</template>

<script setup>
import { ref, defineProps } from 'vue'
const props = defineProps({
	position: {
		type: String,
		default: 'bottom'
	}
})
const show = ref(false);
const clickHandle = () => {
	show.value = !show.value;
}
</script>

<style lang="scss">
.btn {
	display: inline-block;
	position: relative;
	border: 1rpx solid red;
}
.popover-box {
	position: absolute;
	padding: 20rpx;
	background-color: #ccc;
	border-radius: 10rpx;
	white-space: nowrap;
	&.left {
		left: 0;
		top: 50%;
		transform: translate(calc( -100% - 15rpx),-50%);
		&::after {
			position: absolute;
			content: '';
			height: 0;
			width: 0;
			border-width: 15rpx;
			border-color: transparent transparent transparent #ccc;
			border-style: solid;
			right: 0;
			top: 50%;
			transform: translate(100%,-50%);
		}
	}
	&.right {
		right: 0;
		top: 50%;
		transform: translate(calc(100% + 15rpx),-50%);
		&::after {
			position: absolute;
			content: '';
			height: 0;
			width: 0;
			border-width: 15rpx;
			border-color: transparent #ccc transparent transparent;
			border-style: solid;
			left: 0;
			top: 50%;
			transform: translate(-100%,-50%);
		}
	}
	&.top {
		left: 50%;
		top: 0;
		transform: translate(-50%,calc(-100% - 15rpx));
		&::after {
			position: absolute;
			content: '';
			height: 0;
			width: 0;
			border-width: 15rpx;
			border-color: #ccc transparent transparent transparent;
			border-style: solid;
			left: 50%;
			bottom: 0;
			transform: translate(-50%,100%);
		}
	}
	&.bottom {
		bottom: 0;
		left: 50%;
		transform: translate(-50%,calc(100% + 15rpx));
		&::after {
			position: absolute;
			content: '';
			height: 0;
			width: 0;
			border-width: 15rpx;
			border-color: transparent transparent #ccc transparent;
			border-style: solid;
			left: 50%;
			top: 0;
			transform: translate(-50%,-100%);
		}
	}
}
</style>